<template>
    <n-drawer :width="800" :show="true" class="form">
        <n-drawer-content>
            <template #header>
                {{ props.entityName }} 的新记录
            </template>
            <algorithm :pointId="1" :value="1" @change-vaule="algorithmChange" />
            <equipment :pointId="1" :value="1" @change-vaule="equipmentChange" />
            <n-divider title-placement="left">DAK判定:&nbsp;&nbsp;&nbsp;&nbsp;
                <n-checkbox size="large" label="D" v-model:checked="formData.d" />
                <n-checkbox size="large" label="A" v-model:checked="formData.a" />
                <n-checkbox size="large" label="K" v-model:checked="formData.k" />
            </n-divider>
            <n-divider title-placement="left">记录内容:</n-divider>
            <n-input v-model:value="formData.content" type="textarea" placeholder="记录内容" />
            <n-divider title-placement="left">记录状态:</n-divider>
            <n-slider v-model:value="formData.type" :marks="marks" step="mark" :max="5" :tooltip="false">
                <template #thumb>
                    <n-icon-wrapper :size="24" :border-radius="12">
                        <n-icon :size="18" :component="Hourglass" />
                    </n-icon-wrapper>
                </template>
            </n-slider>
            <template #footer>
                <n-button type="info" ghost class="sumbitButton" @click='sumbit()'>提交</n-button>
                <n-button type="error" ghost @click='closeDrawer()'>取消</n-button>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue'
import { NDrawer, NInput, NButton, NDrawerContent, NCheckbox, NDivider, NSlider, NIcon, NIconWrapper, useMessage } from 'naive-ui'
import equipment from './equipment.vue'
import algorithm from './algorithm.vue'
import { HourglassOutline as Hourglass, NotificationsCircleOutline as NotificationsCircle } from '@vicons/ionicons5'
import requset from "@/utils/requset"
import type { response } from "@/utils/requset"
import { inject } from "vue";

const message = useMessage();

const reload = inject("reload", () => {});

const props = defineProps<{
    entityId: number | undefined,
    entityName: string | undefined,
}>()

const formData = ref({
    algorithm: '0',
    equipment: '0',
    content: '',
    d: false,
    a: false,
    k: false,
    type: 0,
})

const marks = ref({
    0: '原状',
    1: '未改造',
    2: '改造中',
    3: '存在问题',
    4: '改造完成',
    5: '预期',
})

const emitFn = defineEmits(['closeDrawer'])

function closeDrawer() {
    emitFn('closeDrawer', false)
}

function algorithmChange(value: number) {
    formData.value.algorithm = String(value)
}

function equipmentChange(value: number) {
    formData.value.equipment = String(value)
}

function sumbit() {
    requset.post('/project/insertNote',
        {
            entityId: props.entityId,
            type: formData.value.type,
            algorithmId: formData.value.algorithm,
            equipmentId: formData.value.equipment,
            content: formData.value.content,
            dak: getDak()
        }).then((res: response<Boolean>) => {
            if (res.status !== 200) {
                return;
            }
            let data = res.data.data;
            if (data === true) {
                reload();
                message.warning("添加成功", {
                    icon: () => h(NIcon, null, { default: () => h(NotificationsCircle) })
                })
            }
        })
}

function getDak(): number {
    let dak: number = 0;
    if (formData.value.d) {
        dak += 4;
    }
    if (formData.value.a) {
        dak += 2;
    }
    if (formData.value.k) {
        dak += 1;
    }
    return dak;
}
</script>

<style>
.form {
    padding: 20px;
}

.sumbitButton {
    margin-right: 20px;
}
</style>